<template>
	<view class="body">
		<view class="mobel" v-if="Tgetcode">
			<text class="iconfont icon-shouji hoseu"></text>
			<input type="text" placeholder="请输入原来的手机号" maxlength="11" v-model="mobile1" />
		</view>
		<view class="mobel" v-else>
			<text class="iconfont icon-shouji hoseu" style="color:#4CD964"></text>
			<input type="text" placeholder="请输入新的手机号" maxlength="11" v-model="mobile2" />
		</view>
		<view class="rule"></view>
		<view class="mobels" v-if="Tgetcode">
			<view class="moble_left">
				<text class="iconfont  icon-jiesuo hoseus"></text>
				<input type="text" placeholder="输入验证码" v-model="code1" />
			</view>
			<view>
				<button class="codes" :disabled="disabled" @click="Getcode">{{ devecode }}</button>
			</view>
		</view>
		<view class="mobels" v-else>
			<view class="moble_left">
				<text class="iconfont  icon-jiesuo hoseus"></text>
				<input type="text" placeholder="输入验证码" v-model="code2" />
			</view>
			<view>
				<button class="codes" :disabled="disableds" @click="Getcodes">{{ devecodes }}</button>
			</view>
		</view>
		<view class="bottm" v-if="Tgetcode"><button type="default" class="save" @click="nextStrp">下一步</button></view>
		<view class="bottm" v-else><button type="default" class="save" @click="nextStrps">提交</button></view>
	</view>
</template>

<script>
import { getCode,changeMobileByCode, sendcode } from '../../utils/userjh/changeMobile.js';
export default {
	data() {
		return {
			mobile1: '',
			code1: '',
			devecode: '获取验证码',
			devecodes: '获取验证码',
			disabled: false,
			disableds: false,
			Tgetcode: true,
			mobile2: '',
			code2: ''
		};
	},
	onLoad() {},
	methods: {
		//最新手机号
		async nextStrps(){
			if (this.mobileOtes()) return;
			const res = await changeMobileByCode({ mobile: this.mobile2, code: this.code2 });
			console.log(res)
			if (res.errCode == 10000) {
				let seft = this
				uni.showModal({
					title: '提示',
					content: '是否确定更改!',
					success: function (res) {
						if (res.confirm) {
							uni.reLaunch({
								url:'../login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		},
		//原来手机号
		async nextStrp() {
			if (this.mobileOte()) return;
			const res = await getCode({ mobile: this.mobile1, code: this.code1 });
			console.log(res)
			if (res.errCode == 10000) {
				let seft = this
				uni.showModal({
					title: '提示',
					content: '要更改新的手机号？',
					success: function (res) {
						if (res.confirm) {
							seft.Tgetcode = false;
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		},
		//新手机号的验证
		async Getcodes(){
			if (this.mobileOtes()) return;
				if (this.changsTimes()) return;
				const res = await sendcode({ mobile: this.mobile2 });
				console.log(res);

		},
		//原手机号发送验证
		async Getcode() {
			if (this.mobileOte()) return;
			let mobile = uni.getStorageSync('userinfo').mobile;
			console.log(mobile == this.mobile1);
			if (mobile == this.mobile1) {
				if (this.changsTime()) return;
				const res = await sendcode({ mobile: this.mobile1 });
				console.log(res);
			} else {
				uni.showToast({
					title: '请确保手机号和原手机号一致',
					icon: 'error'
				});
			}
		},
		//验证码定时器
		changsTime() {
			let Item,
				consts = 60,
				Itemer = 1000,
				devecode = '';
			Item = setInterval(() => {
				consts--;
				devecode = `${consts}秒`;
				if (consts === 0) {
					clearInterval(Item);
					this.disabled = false;
					devecode = '重新获取验证码';
				} else {
					this.disabled = true;
				}
				this.devecode = devecode;
			}, Itemer);
		},
		//验证码定时器2
		changsTimes() {
			let Items,
				consts = 60,
				Itemer = 1000,
				devecodw = '';
			Items = setInterval(() => {
				consts--;
				devecodw = `${consts}秒`;
				if (consts === 0) {
					clearInterval(Items);
					this.disableds = false;
					devecodw = '重新获取验证码';
				} else {
					this.disableds = true;
				}
				this.devecodes = devecodw;
			}, Itemer);
		},
		//手机号验证正则
		mobileOte(e) {
			let mobile = this.mobile1;
			let ifmobile = /^[1][3,4,5,6,7,8,9]\d{9}$/;
			if (!ifmobile.test(mobile)) {
				uni.showToast({
					title: '手机号不合法',
					icon: 'error',
					mask: true
				});
				return true;
			}
		},
		mobileOtes(e) {
				let mobile = this.mobile2;
				let ifmobile = /^[1][3,4,5,6,7,8,9]\d{9}$/;
				if (!ifmobile.test(mobile)) {
					uni.showToast({
						title: '手机号不合法',
						icon: 'error',
						mask: true
					});
					return true;
				}
			}
	},


};
</script>

<style lang="less">
@import './../../static/style/change.less';
.codes {
	font-size: 24rpx;
}
</style>
